import React, { useContext} from "react";
import classNames from 'classnames';
import { MenuContext } from "./menu.tsx";

export interface IMenuItemProps {
    index?: string;
    disabled?: boolean;
    className?: string;
    style?: React.CSSProperties;
    children?: React.ReactNode;
}
const MenuItem: React.FC<IMenuItemProps> = (props) => { 
    const { index, disabled, className, style, children } = props;
    const context = useContext(MenuContext); // 父组件传递的上下文
    const classes = classNames("menu-item", className, {
        "is-disabled": disabled,
        "is-active": context.index === index
    });
    const handleClick = () => { 
        if (context.onSelect && !disabled && (typeof index === 'string')) {
            // 不处于禁用状态
            context.onSelect(index);
        }
    }
    return (
        <li className={ classes} style={style} onClick={handleClick}>
            { children}
        </li>
    );
}
MenuItem.displayName = "MenuItem";
export default MenuItem;